<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#fff',
		navigationBarTextStyle: 'black',
		backgroundColor: '#fff',
		navigationBarTitleText: '共读计划',
	},
}
</route>
<template>
	<view class="page-class">
		<view class="pt-6 box-border">
			<!-- <view class="w-full pl-4 box-border">
				<scroll-view scroll-x class="w-full h-[63rpx] whitespace-nowrap">
					<view
						class="h-full px-4 inline-flex justify-center items-center rounded-[30rpx] text-[25rpx] mr-[20rpx]"
						:style="{
							background: item.id === grade_id ? '#2BA5E0' : '#F3F3F5',
							color: item.id === grade_id ? '#fff' : '#919191',
						}"
						v-for="item in gradeList"
						:key="item.id"
						@tap="choseGrade(item.id)"
					>
						{{ item.name }}
					</view>
				</scroll-view>
			</view> -->

			<view class="w-full h-[110rpx] px-4 pb-[13rpx] flex items-end justify-between box-border">
				<view class="flex items-center h-[63rpx]">
					<view
						class="px-3 h-full flex justify-center items-center rounded-[30rpx] text-[#303030] text-[26rpx]"
						style="background: #f3f3f5"
						@tap="openModal('grade', '选择年级')"
						>{{ modalInfo.name }}<text class="triangle"></text
					></view>
				</view>
			</view>

			<view class="py-[22rpx] px-4 box-border w-full">
				<view class="w-full">
					<block v-if="platformInfo.thisPage === 1">
						<image
							v-if="currentInfo && currentInfo.cover_img"
							@tap="toDetails(currentInfo.id)"
							class="w-full h-[291rpx] rounded-[30rpx]"
							:src="currentInfo.cover_img"
						></image>
						<block v-if="platformList.length">
							<view
								class="w-full flex justify-between items-center mt-[22rpx]"
								v-for="item in platformList"
								@tap="toDetails(item.id)"
								:key="item.id"
							>
								<image
									class="w-[222rpx] h-[153rpx] rounded-[30rpx]"
									mode="aspectFit"
									:src="item.cover_img"
								></image>
								<view
									class="flex-1 flex flex-col justify-between py-[13rpx] pl-[20rpx] box-border h-[153rpx]"
								>
									<text class="text-[#303030] text-[26rpx]">{{ item.title }}</text>
									<view
										class="text-[#919191] text-[25rpx] flex"
										v-if="item.status === 0 || item.status === 1"
									>
										<text v-if="item.status === 0" class="planstatusBegin">未开始</text>
										<text v-if="item.status === 1" class="planstatusBegin">进行中</text>
										<text class="planstatusTime">{{ item.startTime }}-{{ item.endTime }}</text>
									</view>
									<view v-if="item.status === 2 || item.status === 3">
										<text class="text-[#919191] text-[25rpx]">已过期</text>
										<text class="text-[#34A4E2] text-[25rpx] ml-2" v-if="item.progress > 0"
											>计划完成{{ item.progress }}% 获得积分{{ item.user_collect_integral }}/{{
												item.total_integral
											}}</text
										>
										<text class="text-[#919191] text-[25rpx] ml-2" v-else>未参与计划</text>
									</view>
								</view>
							</view>
						</block>
					</block>
					<no-page
						:title="platformInfo.title"
						:type="platformInfo.type"
						height="600rpx"
						v-if="
							platformInfo.thisPage === 0 || (platformInfo.thisPage === 1 && !platformList.length)
						"
						@click="retryPlatform"
					></no-page>
				</view>
			</view>
		</view>

		<view class="block-3">
			<view class="container">
				<view class="wrapper">
					<text index="71" class="title-2 font-bold">班级共读计划</text>
				</view>
				<view class="wrapper-1">
					<text
						index="73"
						class="title-3"
						@tap="linkUrl('/pages-user/together-record/index?type=2')"
						>全部记录</text
					>
					<uni-icons type="forward" color="#919191" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view
			class="flex items-center mt-[30rpx] class-item-wrap ml-[25rpx] wrapper-3"
			style="width: calc(100% - 50rpx); overflow-y: scroll"
		>
			<uv-scroll-list :indicator="false" :style="{ width: '100%' }">
				<view index="35" class="caption-wrapper-1">
					<text
						index="34"
						:class="index == currentClassPlanIndex ? 'caption-3' : ''"
						v-for="(item, index) in classPlanArrayList"
						:key="index"
						@tap="classPlanChange(index)"
						>{{ item.value[0].class_name }}</text
					>
				</view>
			</uv-scroll-list>
		</view>

		<view
			index="14"
			class="block-4"
			v-if="classPlanArrayList.length > 0"
			v-for="(item, index1) in classPlanArrayList[currentClassPlanIndex].value"
			@tap="linkUrl('/pages/pages-readingPlan/readingPlan-studentDetails/index?plan_id=' + item.id)"
		>
			<text index="13" class="caption-7 font-bold">{{ item.title }}</text>
			<text index="12" class="title-6">{{
				dayjs(item.start_time * 1000).format('YYYY年MM月DD日') +
				' - ' +
				dayjs(item.end_time * 1000).format('YYYY年MM月DD日')
			}}</text>
			<view index="11" class="container-4">
				<view class="flex items-center">
					<text class="text-[25rpx] text-[#34A4E2] ml-2">{{ item.join_total }}人已参与</text>
					<text class="text-[25rpx] text-[#919191] ml-2">{{ item.no_total }}人待参与</text>
					<text class="text-[25rpx] text-[#46C853] ml-2">{{ item.complete_total }}人已完成</text>
				</view>
				<image index="9" :src="baseImg + '/gengduo.png'" class="icon-right-2" />
			</view>
		</view>
		<no-page
			:title="classformInfo.title"
			:type="classformInfo.type"
			height="600rpx"
			v-if="classPlanList && JSON.stringify(classPlanList) === '{}'"
		></no-page>

		<view index="2" class="container-5">
			<view index="1" src="" class="title-wrapper">
				<text index="0" class="title-9" @tap="linkUrl('/pages/releasePlan/one/index')"
					>发布班级共读计划</text
				>
			</view>
		</view>
	</view>

	<uni-popup ref="popup" :mask-click="false" type="bottom" background-color="transparent">
		<view class="w-full h-[824rpx] px-6 py-4 box-border">
			<view
				class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
			>
				<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
					<image
						@tap="closeModal"
						:src="baseImg + '/close-btn.png'"
						class="w-[44rpx] h-[44rpx]"
					></image>
					<text class="text-[#303030] text-[44rpx]">选择年级</text>
					<view
						class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
						style="background: #2ba5e0"
						@tap="confirm"
						>确认</view
					>
				</view>
				<view class="w-full pt-6 box-border" style="height: calc(100% - 53rpx)">
					<view class="h-full flex justify-between py-2 box-border">
						<scroll-view scroll-y class="w-full h-full">
							<view :class="[modalInfo.type === 'grade' ? 'grid grid-cols-3 gap-y-2' : '']">
								<view
									v-for="item in modalList"
									:key="item.id"
									@tap="setItem(item.id, item.name)"
									class="w-full flex justify-center items-center mb-2 last:mb-0"
								>
									<view
										class="max-w-full px-[38rpx] h-[54rpx] box-border flex justify-center items-center rounded-[27rpx] text-[#303030] text-[29rpx]"
										:style="{
											background: modalInfo.id == item.id ? '#44C651' : '',
											color: modalInfo.id == item.id ? '#fff' : '#303030',
										}"
										><text class="truncate">{{ item.name }}</text></view
									>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import auth from '@/utils/auth';
import { systemInfo } from '@/utils/getSystemInfo';
import { formatTime, getGradToTex, getPlanStatusToTex } from '@/utils';
import { Plan, getPlanGradeList, getPlanListApi, getPlantformList } from '@/service/plan';
import dayjs from 'dayjs';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};

const plantForomClass = ref('一年级');
const pantFormPlanList = ref<Plan.PlantFormData>();
const classPlanList = ref<Plan.ClassData>();
const plantformChange = (event: any) => {
	const arrayFromObj = Object.entries(pantFormPlanList.value).map(([key, value]) => ({
		key,
		value,
	}));
	plantForomClass.value = getGradToTex(arrayFromObj[event.detail.current].key);
};
const getPlanList = async (type: number, is_all: number, row: number, line: number) => {
	try {
		if (type == 2 && userInfo.value.class_list.length == 0) return;
		const res = await getPlanListApi({ type, is_all, row, line });
		if (res.status_code === 200) {
			const resData: any = res.data;
			if (type === 1) {
				pantFormPlanList.value = resData;
				plantformChange({ detail: { current: 0 } });
			} else {
				classPlanList.value = resData;
				getClassPlanArray();
				classPlanChange(0);
			}

			// console.log('========>getPlanList', planList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPlanPlanformListerror', error);
		uni.hideLoading();
	}
};
const currentClassPlanIndex = ref(0);
const classPlanArrayList: any = ref([]);
const classPlanChange = (ind: any) => {
	currentClassPlanIndex.value = ind;
	// console.log('========>classPlanChange', event.detail);
};
const getClassPlanArray = () => {
	const arrayFromObj = Object.entries(classPlanList.value).map(([key, value]) => ({ key, value }));
	classPlanArrayList.value = [...arrayFromObj];
};
const gradeList = ref([]);
const grade_id = ref(null);
const choseGrade = (id: number) => {
	grade_id.value = id;
};

const platformList = ref([]);
const platformInfo = ref({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
});
const classformInfo = ref({
	thisPage: -1,
	title: '暂无数据',
	type: '',
});
const currentInfo = computed(() => {
	const obj = platformList.value.filter(item => item.status === 1);
	return obj.length && platformList.value.length > 1 ? obj[0] : null;
});

const toDetails = (id: number) => {
	if (id === undefined) return;
	if (!userInfo.value.school_id) {
		toAuthPage();
		return;
	}
	uni.navigateTo({
		url: `/pages/pages-readingPlan/readingPlan-beiyueDetails/index?plan_id=${id}`,
	});
};
const retryPlatform = () => {
	uni.showLoading({ title: '加载中...' });
	if (!grade_id.value) {
		getGradeList(userInfo.value.school_id);
	} else {
		getPlatformList();
	}
};

const getGradeList = async (sid: number) => {
	try {
		const res = await getPlanGradeList(sid);
		uni.hideLoading();
		if (res.status_code === 200) {
			gradeList.value = res.data;
			platformInfo.value.title = '暂无数据';
			if (!res.data.length) {
				platformInfo.value.thisPage = 0;
				platformInfo.value.type = 'msg';
			} else {
				grade_id.value = userInfo.value.grade[0].grade_id || res.data[0].id;
			}
		} else {
			platformInfo.value.type = 'btn';
			platformInfo.value.thisPage = 0;
			platformInfo.value.title = res.message;
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
	} catch (error) {
		uni.hideLoading();
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '服务器异常';
	}
};
const getPlatformList = async () => {
	try {
		const res = await getPlantformList({
			grade: grade_id.value as number,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			res.data.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月', false);
				item.endTime = formatTime(item.end_time, '年月', false);
			});
			platformList.value = res.data;
			platformInfo.value.thisPage = res.data.length ? 1 : 0;
			if (!res.data.length) {
				platformInfo.value.title = '暂无数据';
				platformInfo.value.type = 'msg';
			}
		} else {
			platformInfo.value.type = 'btn';
			platformInfo.value.thisPage = 0;
			platformInfo.value.title = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '服务器异常';
	}
};

const modalInfo = ref({
	type: '',
	title: '',
	id: null,
	name: '',
});
const modalList = ref([]);
const setItem = (id, name) => {
	console.log('===>', id, name);
	modalInfo.value.id = id;
	modalInfo.value.name = name;
};

const confirm = () => {
	const { type } = modalInfo.value;
	if (!modalInfo.value.id) {
		uni.showToast({
			icon: 'none',
			title: modalInfo.value.title,
		});
		return;
	}
	choseGrade(modalInfo.value.id); //改变年级
	//console.log('===>', modalInfo.value);
	closeModal();
};
// 选择年级
const popup = ref(null);
const openModal = (type?, title?) => {
	modalInfo.value.type = type;
	modalInfo.value.title = title;
	let id = '';
	let name = '';
	let list = [];

	modalList.value = [...gradeList.value];

	console.log('===>', userInfo.value.grade[0].grade_id, userInfo.value.grade[0].grade_name);
	// modalInfo.value.id = userInfo.value.grade[0].grade_id;
	// modalInfo.value.name = userInfo.value.grade[0].grade_name;
	popup.value.open();
};
const closeModal = () => {
	// modalInfo.value = {
	// 	type: '',
	// 	title: '',
	// 	id: '',
	// 	name: '',
	// };
	popup.value.close();
};

onShow(async () => {
	barAlbright.value = navHeight + statusBarHeight;
	console.log('========>onMounted', auth.getLoginStatus());
	if (!auth.getLoginStatus() && !uni.getStorageSync('isLogout')) {
		const slientLogin: any = await auth.getUserSlientInfo();
	}
	// 初始化年级
	modalInfo.value.id = userInfo.value.grade[0].grade_id;
	modalInfo.value.name = userInfo.value.grade[0].grade_name;

	// getPlanList(1, 1, 2, 2);
	getPlanList(2, 1, 3, 2);
	getGradeList(userInfo.value.school_id);

	//
});

watch(grade_id, newValue => {
	if (newValue) {
		// 获取年级阅读计划
		getPlatformList();
	} else {
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '暂无数据';
	}
});
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.block-2 .swiper {
	height: 270rpx !important;
}

.wx-swiper-dots .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #c6c6c8;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 40rpx;
	height: 10rpx;
	border-radius: 10rpx;
	background: #909192;
}

.page-class {
	padding-bottom: 176rpx;
	background-color: #fff;
}

.block-2 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 700rpx;
	min-height: 350rpx;
	margin-top: 44rpx;
	margin-left: 25rpx;

	.container {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 683rpx;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 307rpx;
		height: 53.5rpx;
		padding-top: 0.7rpx;
		margin-left: 17.3rpx;
	}

	.title-2 {
		align-self: center;
		font-size: 33.3rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: -0.6rpx;
		white-space: nowrap;
	}

	.caption-wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 92.4rpx;
		padding: 8.5rpx 8.5rpx 9rpx;
		margin-top: 0.1rem;
		margin-bottom: 0;
		background-color: #f2f3f5;
		border-radius: 8.5rpx;
	}

	.caption-2 {
		align-self: flex-start;
		max-width: 70rpx;
		margin-right: 2.7rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 20.8rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wrapper-1 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 100rpx;
		height: 53.4rpx;
		margin-right: 10rpx;
	}

	.title-3 {
		align-self: center;
		font-size: 22.2rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.icon-right {
		align-self: center;
		width: 11rpx;
		height: 16rpx;
	}

	.container-gdjh {
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 682.6rpx;
		padding: 0 8.3rpx;
		margin: 11.1rpx 0.7rpx 0 0;
		background-color: rgb(253 255 255 / 100%);
		border-radius: 31.25rpx;
		box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);

		.swiper {
			height: 300rpx;
		}
	}

	.container-1 {
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 670rpx;
		padding: 15.3rpx 8.3rpx 18rpx;
		margin: 11rpx 0.7rpx 0 0;
	}

	.grid {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 100%;
	}

	.col {
		position: relative;
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 319.5rpx;
		height: 166.6rpx;
		padding: 22.2rpx 8.3rpx 37.5rpx;
		margin-left: 0.7rpx;
		background-origin: padding-box;
	}

	.col image {
		position: absolute;
		z-index: 1;
		width: 319.4rpx;
		height: 166.6rpx;
	}

	.title-4 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.6rpx;
		margin-top: 10rpx;
		margin-left: 18rpx;
		overflow: hidden;
		font-size: 26.4rpx;
		font-style: normal;
		line-height: 54rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.caption-3 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.7rpx;
		margin-left: 18rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.col-2 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 319.5rpx;
		height: 167rpx;
		padding: 22.2rpx 8.3rpx 36.8rpx;
		background-origin: padding-box;
	}

	.col-2 image {
		position: absolute;
		z-index: 1;
		width: 319.5rpx;
		height: 167rpx;
	}

	.time {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.6rpx;
		margin-top: 10rpx;
		margin-left: 18rpx;
		overflow: hidden;
		font-size: 26.3rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-5 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.6rpx;
		margin-left: 18rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wrapper-2 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 653.4rpx;
		margin-top: 13.8rpx;
	}

	.layer {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.4rpx;
	}

	.mask {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}

	.overlayer {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}
}

.block-3 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 700rpx;
	height: 54rpx;
	margin-top: 40.9rpx;
	margin-left: 25rpx;

	.container {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 683.3rpx;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: auto;
		height: 53.4rpx;
		padding-top: 0.6rpx;
		margin-left: 17.3rpx;
	}

	.title-2 {
		align-self: center;
		font-size: 33.3rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
	}

	.caption-wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: auto;
		padding: 8.2rpx 8.3rpx 8.9rpx;
		margin-top: 0.1rem;
		margin-bottom: 0;
		margin-left: 15rpx;
		background-color: #f2f3f5;
		border-radius: 8.3rpx;
	}

	.caption-2 {
		align-self: flex-start;
		margin-right: 2.7rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 20.8rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wrapper-1 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 100rpx;
		height: 53.4rpx;
		margin-right: 10rpx;
	}

	.title-3 {
		align-self: center;
		font-size: 22.2rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.icon-right {
		align-self: center;
		width: 11.1rpx;
		height: 15.9rpx;
	}
}

.block-4 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682.6rpx;
	height: 240rpx;
	padding: 31.9rpx 8.3rpx 0;
	margin: 10.4rpx 0.6rpx 30rpx 25rpx;
	background-color: rgb(253 255 255 / 100%);
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx 0 rgb(0 0 0 / 7%);

	.caption-7 {
		align-self: flex-start;
		max-width: 621.5rpx;
		margin-left: 22.2rpx;
		overflow: hidden;
		font-size: 37.5rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.75rpx;
		white-space: nowrap;
	}

	.title-6 {
		align-self: flex-start;
		max-width: 621.5rpx;
		margin-left: 22.2rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.container-4 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 624.3rpx;
		padding: 20rpx 8.3rpx;
		margin-top: 33.4rpx;
		background-color: rgb(249 249 249 / 100%);
		border-radius: 31.2rpx;
	}

	.title-7 {
		align-self: center;
		margin-left: 18.75rpx;
		font-size: 25rpx;
		font-style: normal;
		line-height: 54.1rpx;
		color: rgb(51 163 225 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: -0.5rpx;
		white-space: pre;
	}

	.icon-right-2 {
		align-self: center;
		width: 25rpx;
		height: 22.9rpx;
		margin: 0 18.75rpx 2rpx 0;
	}

	.layer-1 {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.4rpx;
	}

	.mask-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}

	.overlayer-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}
}

.container-5 {
	position: fixed;
	bottom: 0;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 750rpx;
	height: 166rpx;
	background-color: rgb(255 255 255 / 97%);
	box-shadow: 0 -4.1rpx 11.1rpx rgb(129 129 129 / 10%);
	transform: translate(-50%);

	.title-wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 444rpx;
		height: 83rpx;
		margin-top: 40rpx;
		background-color: #2ba5e0;
		border-radius: 83rpx;
	}

	.title-9 {
		align-self: flex-start;
		overflow: hidden;
		font-size: 33rpx;
		font-style: normal;
		line-height: 83rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.wrapper-3::-webkit-scrollbar {
	display: none;
}
.caption-wrapper-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: auto;
	border-radius: 18rpx;
	text {
		height: 36rpx;
		background: #f3f3f5;
		border-radius: 18rpx;
		font-size: 22rpx;
		color: #919191;
		line-height: 36rpx;
		opacity: 0.97;
		display: inline-block;
		padding: 0 18rpx;
		margin-right: 10rpx;
		&.caption-3 {
			background: #2ba5e0;
			color: #ffffff;
		}
	}
}

.caption-3 {
	align-self: flex-start;
	margin-left: 1.3rpx;
	overflow: hidden;
	font-size: 24rpx;
	font-style: normal;
	line-height: 30rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.organization-wrapper {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 143.75rpx;
	padding: 9rpx 8.3rpx 6.9rpx;
	margin-left: 9rpx;
	background-color: rgb(242 243 245 / 100%);
	border-radius: 18rpx;
}

.organization {
	align-self: flex-start;
	margin-left: 1.3rpx;
	overflow: hidden;
	font-size: 24rpx;
	font-style: normal;
	line-height: 30rpx;
	color: rgb(145 145 145 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.planstatusBegin {
	font-size: 25rpx;
	font-style: normal;
	line-height: 50rpx;
	height: 50rpx;
	border-radius: 10rpx;
	padding: 0 20rpx;
	background-color: #2ba5e0;
	color: #fff;
}
.planstatusTime {
	display: flex;
	align-items: center;
	margin-left: 10rpx;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.triangle {
	width: 0;
	height: 0;
	margin-left: 11rpx;
	border-top: 15rpx solid #777;
	border-right: 10rpx solid transparent;
	border-left: 10rpx solid transparent;
}
.last_a_mb-0:last-child {
	margin-bottom: 16rpx;
}
</style>
